<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>IconFont</title>
		<link rel="stylesheet" href="./static/font-awesome.min.css">
		<link rel="stylesheet" href="./static/icon.min.css">
		<link href="./static/basic.min.css" rel="stylesheet" type="text/css">
		<link href="./static/style.min.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="./static/jquery-3.2.1.min.js"></script>

		<style type="text/css">
			.divFont {
				width: 120px;
				font-size: medium;
				color: white;
				background-color: #8aabe5;
				text-align: center;
				font-weight: 600;
			}
			
			.normal {
				background-color: #ffffff;
			}
			
			.change {
				background-color: #999999e0;
			}
			
			.borderStyle {
				border: 2px solid #999;
				padding: 3px;
				float: left;
				width: 200px;
				height: 200px;
				border-color: #8aabe5;
				position: fixed;
			}
			
			.nav {
				background-color: white;
				float: left;
				position: fixed;
			}
			
			.nav ul {
				margin: 0;
				padding: 0;
				list-style-type: none;
				line-height: 3em;
			}
			
			.nav a {
				display: block;
				width: 10em;
				font-size: medium;
				color: #551A8B;
				text-align: center;
				text-decoration: none;
				background-color: #999999d4;
			}
			
			.nav a:hover {
				background-color: #969896;
			}
			
			.div1::before {
				content: "";
				width: 5px;
				height: 36px;
				position: absolute;
				top: 0;
				left: 0;
				background: red;
			}
			
			.left-nav {
				position: fixed
			}
			
			.left-nav ul {
				width: 180px;
			}
			.left-nav ul li{
				font-size: 16px;
				font-weight: 1000;
			}
			/*  消息提示框*/
			
			.showMessage {
				padding: 5px 10px;
				border-radius: 5px;
				position: fixed;
				top: 45%;
				left: 45%;
				color: #ffffff;
			}
			
			.showMessageSuccess {
				background-color: #00B7EE;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$(document).scroll(function() { //监听滚动事件
					//已经滚动的高度+一个合理值
					var nScrollTop = $(document).scrollTop() + 229;
					//所有ul高度的数组
					var arrHeight = getHeight($('.icon_lists'));
					var b = '';
					$.each(arrHeight, function(index, value) {
						//已经滚动的高度和几个ul的高度进行比较
						if(nScrollTop < value) {
							b = index;
							return false;
						}
					});
					$('.left-nav ul li').children('a').removeClass('hover');
					$('.left-nav ul li').eq(b).children('a').addClass('hover');
					$('#lanPos').css('top', $('.left-nav ul li').eq(b).offset().top - $('.left-nav').offset().top);
				});

				$('#container i').each(function() {
					$(this).addClass("fa-2x");
				})
				$('#container li').dblclick(function() {
					const input = document.createElement('input');
					document.body.appendChild(input);
					const text = $(this).children('div').text();
					const value = 'fa ' + text;
					input.setAttribute('value', value);
					input.select();
					if(document.execCommand('copy')) {
						document.execCommand('copy');
					}
					document.body.removeChild(input);
					showMessage(value + " 复制成功！");
				})

				$('#lanPos').css('top', $('.left-nav .hover').offset().top - $('.left-nav').offset().top);
				$('.left-nav ul li').hover(function() {
					$('#lanPos').css('top', $(this).offset().top - $('.left-nav').offset().top);
				}, function() {
					$('#lanPos').css('top', $('.left-nav .hover').offset().top - $('.left-nav').offset().top);
				})

				$('.left-nav ul li').click(function() {
					for(var i = 0; i < $('.left-nav ul li').length; i++) {
						if(this == $('.left-nav ul li').get(i)) {
							$('.left-nav ul li').eq(i).children('a').addClass('hover');
							var param = $('.left-nav ul li').eq(i).children('a').attr('id') + "Li";
							$("html,body").animate({
								scrollTop: $("#" + param).offset().top
							}, 200);
						} else {
							$('.left-nav ul li').eq(i).children('a').removeClass('hover');
						}
					}

				})
			})

			function getHeight(mc_shop) {
				var arr = new Array();
				mc_shop.each(function(index, element) {
					if(index == 0) {
						arr[index] = $(element).height();
					} else {
						arr[index] = arr[index - 1] + $(element).height();
					}
				});
				return arr;
			}

			/**
			 * 弹出消息提示框，采用浏览器布局，位于整个页面中央，默认显示3秒
			 * 后面的消息会覆盖原来的消息
			 * @param message：待显示的消息
			 * 
			 */
			function showMessage(message) {
				let messageJQ = $("<div class='showMessage'>" + message + "</div>");
				messageJQ.addClass("showMessageSuccess");
				/**先将原始隐藏，然后添加到页面，最后以600秒的速度下拉显示出来*/
				messageJQ.hide().appendTo("body").slideDown(600);
				/**3秒之后自动删除生成的元素*/
				window.setTimeout(function() {
					messageJQ.remove();
				}, 2000);
			}
		</script>

	</head>

	<body>
		<div class="main">
			<div class="left-nav">
				<ul>
					<li>
						<a class="hover" id="divCy" href="javascript:void(0)" ">常用图标</a>
					</li>
					<li>
						<a id="divBd" href="javascript:void(0)">表单类图标</a>
					</li>
					<li>
						<a id="divSs" href="javascript:void(0)">手势图标</a>
					</li>
					<li>
						<a id="divYl" href="javascript:void(0)">医疗图标</a>
					</li>
					<li>
						<a id="divJz" href="javascript:void(0)">加载中图标</a>
					</li>
					<li>
						<a id="divJz" href="javascript:void(0)">人物图标</a>
					</li>
					<li>
						<a id="divWb" href="javascript:void(0)">文件图标</a>
					</li>

					<li>
						<a id="divJt" href="javascript:void(0)">交通工具图标</a>
					</li>
					<li>
						<a id="divYp" href="javascript:void(0)">音视/频图标</a>
					</li>
					<li>
						<a id="divFx" href="javascript:void(0)">方向图标</a>
					</li>
					<li>
						<a id="divSj" href="javascript:void(0)">社交/商业图标</a>
					</li>
					<li>
						<a id="divQt" href="javascript:void(0)">其他图标</a>
					</li>
					<div id="lanPos"></div>
				</ul>
			</div>
			<div id="container" style="margin-left: 180px">
				<ul class="icon_lists clear">
					<div id="divCyLi" class="divFont">常用图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					<li><i class="fa fa-plus"></i>
						<div class="name">fa-plus</div>
					</li>
					<li><i class="fa fa-edit"></i>
						<div class="name">fa-edit</div>
					</li>

					<li><i class="fa fa-minus"></i>
						<div class="name">fa-minus</div>
					</li>
					
					<li><i class="fa fa-search"></i>
						<div class="name">fa-search</div>
					</li>

					<li><i class="fa fa-eye"></i>
						<div class="name">fa-eye</div>
					</li>
					<li><i class="fa fa-save"></i>
						<div class="name">fa-save</div>
					</li>
					<li><i class="fa fa fa-undo"></i>
						<div class="name">fa fa-undo</div>
					</li>
					<li><i class="fa fa-ban"></i>
						<div class="name">fa-ban</div>
					</li>
					<li><i class="fa  fa-check"></i>
						<div class="name">fa-check</div>
					</li>
					<li><i class="fa  fa-check-circle-o"></i>
						<div class="name">fa-check-circle-o</div>
					</li>
					<li><i class="fa  fa-times"></i>
						<div class="name">fa-times</div>
					</li>
					<li><i class="fa  fa-times-circle-o"></i>
						<div class="name">fa-times-circle-o</div>
					</li>
					<li><i class="fa fa-file-o"></i>
						<div class="name">fa-file-o</div>
					</li>
					<li><i class="fa fa-folder-o"></i>
						<div class="name">fa-folder-o</div>
					</li>

					<li><i class="fa fa-align-center"></i>
						<div class="name">fa-align-center</div>
					</li>
					
					<li><i class="fa fa-align-left"></i>
						<div class="name">fa-align-left</div>
					</li>
					<li><i class="fa fa-align-right"></i>
						<div class="name">fa-align-right</div>
					</li>
					
					<li><i class="fa fa-link"></i>
						<div class="name">fa-link</div>
					</li>

					<li><i class="fa fa-sitemap"></i>
						<div class="name">fa-sitemap</div>
					</li>
					<li><i class="fa fa-sign-in"></i>
						<div class="name">fa-sign-in</div>
					</li>
					<li><i class="fa fa-sign-out"></i>
						<div class="name">fa-sign-out</div>
					</li>
					<li><i class="fa fa-expand"></i>
						<div class="name">fa-expand</div>
					</li>
					<li><i class="fa fa-upload"></i>
						<div class="name">fa-upload</div>
					</li>
					<li><i class="fa fa-download"></i>
						<div class="name">fa-download</div>
					</li>
					
					<li><i class="fa fa-sort-alpha-asc"></i>
						<div class="name">fa-sort-alpha-asc</div>
					</li>
					<li><i class="fa fa-sort-alpha-desc"></i>
						<div class="name">fa-sort-alpha-desc</div>
					</li>
					<li><i class="fa fa-sort-amount-asc"></i>
						<div class="name">fa-sort-amount-asc</div>
					</li>
					<li><i class="fa fa-sort-amount-desc"></i>
						<div class="name">fa-sort-amount-desc</div>
					</li>
					
					<li><i class="fa fa-sort-numeric-asc"></i>
						<div class="name">fa-sort-numeric-asc</div>
					</li>
					<li><i class="fa fa-sort-numeric-desc"></i>
						<div class="name">fa-sort-numeric-desc</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divBdLi" class="divFont">表单类图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa  fa-check"></i>
						<div class="name">fa-check</div>
					</li>
					<li><i class="fa  fa-check-circle"></i>
						<div class="name">fa-check-circle</div>
					</li>
					<li><i class="fa  fa-check-circle-o"></i>
						<div class="name">fa-check-circle-o</div>
					</li>
					<li><i class="fa  fa-check-square"></i>
						<div class="name">fa-check-square</div>
					</li>
					<li><i class="fa  fa-check-square-o"></i>
						<div class="name">fa-check-square-o</div>
					</li>
					
					<li><i class="fa fa-plus"></i>
						<div class="name">fa-plus</div>
					</li>
					<li><i class="fa fa fa-plus-circle"></i>
						<div class="name">fa-plus-circle</div>
					</li>
					<li><i class="fa fa-plus-square"></i>
						<div class="name">fa-plus-square</div>
					</li>
					<li><i class="fa fa-plus-square-o"></i>
						<div class="name">fa-plus-square-o</div>
					</li>
					
					<li><i class="fa fa-minus"></i>
						<div class="name">fa-minus</div>
					</li>
					<li><i class="fa fa-minus-circle"></i>
						<div class="name">fa-minus-circle</div>
					</li>
					<li><i class="fa fa-minus-square"></i>
						<div class="name">fa-minus-square</div>
					</li>
					<li><i class="fa fa-minus-square-o"></i>
						<div class="name">fa-minus-square-o</div>
					</li>
					<li><i class="fa  fa-times"></i>
						<div class="name">fa-times</div>
					</li>
					<li><i class="fa  fa-times-circle"></i>
						<div class="name">fa-times-circle</div>
					</li>
					<li><i class="fa  fa-times-circle-o"></i>
						<div class="name">fa-times-circle-o</div>
					</li>
					<li><i class="fa  fa-search-minus"></i>
						<div class="name">fa-search-minus</div>
					</li>
					<li><i class="fa  fa-search-plus"></i>
						<div class="name">fa-search-plus</div>
					</li>
					<li><i class="fa fa-save"></i>
						<div class="name">fa-save</div>
					</li>
					<li><i class="fa fa-repeat"></i>
						<div class="name">fa-repeat</div>
					</li>
					<li><i class="fa fa-rotate-left"></i>
						<div class="name">fa-rotate-left</div>
					</li>
					<li><i class="fa fa-rotate-right"></i>
						<div class="name">fa-rotate-right</div>
					</li>
					<li><i class="fa fa-share-square-o"></i>
						<div class="name">fa-share-square-o</div>
					</li>
					<li><i class="fa fa-question"></i>
						<div class="name">fa-question</div>
					</li>
					<li><i class="fa fa-copy"></i>
						<div class="name">fa-copy</div>
					</li>
					<li><i class="fa fa-clipboard"></i>
						<div class="name">fa-clipboard</div>
					</li>
					<li><i class="fa fa-cut"></i>
						<div class="name">fa-cut</div>
					</li>
					<li><i class="fa fa-paste"></i>
						<div class="name">fa-paste</div>
					</li>
					<li><i class="fa fa-crop"></i>
						<div class="name">fa-crop</div>
					</li>
					<li><i class="fa fa-text-height"></i>
						<div class="name">fa-text-height</div>
					</li>
					<li><i class="fa fa-text-width"></i>
						<div class="name">fa-text-width</div>
					</li>
					<li><i class="fa fa-columns"></i>
						<div class="name">fa-columns</div>
					</li>
					<li><i class="fa fa-unlock-alt"></i>
						<div class="name">fa-unlock-alt</div>
					</li>
					<li><i class="fa fa-unlock"></i>
						<div class="name">fa-unlock</div>
					</li>
					<li><i class="fa fa-lock"></i>
						<div class="name">fa-lock</div>
					</li>
					<li><i class="fa fa-pencil-square-o"></i>
						<div class="name">fa-pencil-square-o</div>
					</li>
					<li><i class="fa fa-font"></i>
						<div class="name">fa-font</div>
					</li>
					<li><i class="fa fa-quote-left"></i>
						<div class="name">fa-quote-left</div>
					</li>
					<li><i class="fa fa-quote-right"></i>
						<div class="name">fa-quote-right</div>
					</li>
					<li><i class="fa fa-bold"></i>
						<div class="name">fa-bold</div>
					</li>
					<li><i class="fa fa-italic"></i>
						<div class="name">fa-italic</div>
					</li>
					<li><i class="fa fa-underline"></i>
						<div class="name">fa-underline</div>
					</li>
					<li><i class="fa fa-bar-chart-o"></i>
						<div class="name">fa-bar-chart-o</div>
					</li>
					<li><i class="fa fa-bookmark"></i>
						<div class="name">fa-bookmark</div>
					</li>
					<li><i class="fa fa-bookmark-o"></i>
						<div class="name">fa-bookmark-o</div>
					</li>
					<li><i class="fa fa-info"></i>
						<div class="name">fa-info</div>
					</li>
					<li><i class="fa fa-info-circle"></i>
						<div class="name">fa-info-circle</div>
					</li>
					<li><i class="fa fa-indent"></i>
						<div class="name">fa-indent</div>
					</li>
					<li><i class="fa fa-outdent"></i>
						<div class="name">fa-outdent</div>
					</li>
					<li><i class="fa fa-list"></i>
						<div class="name">fa-list</div>
					</li>
					<li><i class="fa fa-list-alt"></i>
						<div class="name">fa-list-alt</div>
					</li>
					<li><i class="fa fa-list-ol"></i>
						<div class="name">fa-list-ol</div>
					</li>
					<li><i class="fa fa-list-ul"></i>
						<div class="name">fa-list-ul</div>
					</li>
					<li><i class="fa fa-navicon"></i>
						<div class="name">fa-navicon</div>
					</li>
					<li><i class="fa fa-reorder"></i>
						<div class="name">fa-reorder</div>
					</li>
					<li><i class="fa fa-refresh"></i>
						<div class="name">fa-refresh</div>
					</li>
					<li><i class="fa fa-mail-forward"></i>
						<div class="name">fa-mail-forward</div>
					</li>
					<li><i class="fa fa-reply"></i>
						<div class="name">fa-reply</div>
					</li>
					<li><i class="fa fa-reply-all"></i>
						<div class="name">fa-reply-all</div>
					</li>
					<li><i class="fa fa-retweet"></i>
						<div class="name">fa-retweet</div>
					</li>
					
					<li><i class="fa fa-code"></i>
						<div class="name">fa-code</div>
					</li>
					<li><i class="fa fa-code-fork"></i>
						<div class="name">fa-code-fork</div>
					</li>
					<li><i class="fa fa-exchange"></i>
						<div class="name">fa-exchange</div>
					</li>
					<li><i class="fa fa-header"></i>
						<div class="name">fa-header</div>
					</li>
					<li><i class="fa fa-filter"></i>
						<div class="name">fa-filter</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divSsLi" class="divFont">手势图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa fa-hand-o-down"></i>
						<div class="name">fa-hand-o-down</div>
					</li>
					<li><i class="fa  fa-hand-o-left"></i>
						<div class="name">fa-hand-o-left</div>
					</li>
					<li><i class="fa fa-hand-o-right"></i>
						<div class="name">fa-hand-o-right</div>
					</li>
					<li><i class="fa  fa-hand-o-up"></i>
						<div class="name">fa-hand-o-up</div>
					</li>
					<li><i class="fa  fa-thumbs-down"></i>
						<div class="name">fa-thumbs-down</div>
					</li>
					<li><i class="fa  fa-thumbs-o-down"></i>
						<div class="name">fa-thumbs-o-down</div>
					</li>
					<li><i class="fa  fa-thumbs-o-up"></i>
						<div class="name">fa-thumbs-o-up</div>
					</li>
					<li><i class="fa  fa-thumbs-up"></i>
						<div class="name">fa-thumbs-up</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divYlLi" class="divFont">医疗图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa  fa-ambulance"></i>
						<div class="name">fa-ambulance</div>
					</li>
					<li><i class="fa fa-h-square"></i>
						<div class="name">fa-h-square</div>
					</li>
					<li><i class="fa  fa-heart"></i>
						<div class="name">fa-heart</div>
					</li>
					<li><i class="fa fa-heart-o"></i>
						<div class="name">fa-heart-o</div>
					</li>
					<li><i class="fa  fa-hospital-o"></i>
						<div class="name">fa-hospital-o</div>
					</li>
					<li><i class="fa fa-medkit"></i>
						<div class="name">fa-medkit</div>
					</li>
					<li><i class="fa  fa-plus-square"></i>
						<div class="name">fa-plus-square</div>
					</li>
					<li><i class="fa   fa-stethoscope"></i>
						<div class="name">fa-stethoscope</div>
					</li>
					<li><i class="fa   fa-user-md"></i>
						<div class="name">fa-user-md</div>
					</li>
					<li><i class="fa   fa-wheelchair"></i>
						<div class="name">fa-wheelchair</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divJzLi" class="divFont">加载中图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					<li><i class="fa fa-circle-o-notch"></i>
						<div class="name">fa-circle-o-notch</div>
					</li>
					<li><i class="fa fa-refresh"></i>
						<div class="name">fa-refresh</div>
					</li>
					<li><i class="fa  fa-spinner"></i>
						<div class="name">fa-spinner</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divJzLi" class="divFont">人物图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					<li><i class="fa fa-female"></i>
						<div class="name">fa-female</div>
					</li>
					<li><i class="fa fa-male"></i>
						<div class="name">fa-male</div>
					</li>
					<li><i class="fa fa-child"></i>
						<div class="name">fa-child</div>
					</li>
					<li><i class="fa fa-user"></i>
						<div class="name">fa-user</div>
					</li>
					<li><i class="fa fa-user-md"></i>
						<div class="name">fa-user-md</div>
					</li>
					<li><i class="fa fa-users"></i>
						<div class="name">fa-users</div>
					</li>
					<li><i class="fa fa-group"></i>
						<div class="name">fa-group</div>
					</li>
				</ul>
				<ul class="icon_lists clear">
					<div id="divWbLi" class="divFont">文件图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					
					<li><i class="fa fa-file"></i>
						<div class="name">fa-file</div>
					</li>
					<li><i class="fa fa-file-text-o"></i>
						<div class="name">fa-file-text-o</div>
					</li>
					<li><i class="fa fa-file-pdf-o"></i>
						<div class="name">fa-file-pdf-o</div>
					</li>
					<li><i class="fa fa-file-word-o"></i>
						<div class="name">fa-file-word-o</div>
					</li>
					<li><i class="fa fa-file-excel-o"></i>
						<div class="name">fa-file-excel-o</div>
					</li>
					<li><i class="fa fa-file-powerpoint-o"></i>
						<div class="name">fa-file-powerpoint-o</div>
					</li>
					<li><i class="fa fa-file-image-o"></i>
						<div class="name">fa-file-image-o</div>
					</li>
					<li><i class="fa fa-file-archive-o"></i>
						<div class="name">fa-file-archive-o</div>
					</li>
					<li><i class="fa fa-file-audio-o"></i>
						<div class="name">fa-file-audio-o</div>
					</li>

					<li><i class="fa fa-file-code-o"></i>
						<div class="name">fa-file-code-o</div>
					</li>
					<li><i class="fa fa-file-movie-o"></i>
						<div class="name">fa-file-movie-o</div>
					</li>
					<li><i class="fa fa-file-o"></i>
						<div class="name">fa-file-o</div>
					</li>
					<li><i class="fa fa-file-picture-o"></i>
						<div class="name">fa-file-picture-o</div>
					</li>
					<li><i class="fa fa-photo"></i>
						<div class="name">fa-photo</div>
					</li>
					<li><i class="fa fa-picture-o"></i>
						<div class="name">fa-picture-o</div>
					</li>
					<li><i class="fa fa-file-powerpoint-o"></i>
						<div class="name">fa-file-powerpoint-o</div>
					</li>
					<li><i class="fa fa-files-o"></i>
						<div class="name">fa-files-o</div>
					</li>
					<li><i class="fa fa-file-sound-o"></i>
						<div class="name">fa-file-sound-o</div>
					</li>
					<li><i class="fa fa-file-text"></i>
						<div class="name">fa-file-text</div>
					</li>
					<li><i class="fa fa-file-video-o"></i>
						<div class="name">fa-file-video-o</div>
					</li>
					<li><i class="fa fa-file-zip-o"></i>
						<div class="name">fa-file-zip-o</div>
					</li>
					<li><i class="fa fa-film"></i>
						<div class="name">fa-film</div>
					</li>
					
					<li><i class="fa fa-floppy-o"></i>
						<div class="name">fa-floppy-o</div>
					</li>
					<li><i class="fa fa-folder"></i>
						<div class="name">fa-folder</div>
					</li>
					<li><i class="fa fa-folder-o"></i>
						<div class="name">fa-folder-o</div>
					</li>
					<li><i class="fa fa-folder-open"></i>
						<div class="name">fa-folder-open</div>
					</li>
					<li><i class="fa fa-folder-open-o"></i>
						<div class="name">fa-folder-open-o</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divJtLi" class="divFont">交通工具图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					<li><i class="fa fa-ambulance"></i>
						<div class="name">fa-ambulance</div>
					</li>
					<li><i class="fa fa-automobile"></i>
						<div class="name">fa-automobile</div>
					</li>

					<li><i class="fa fa-cab"></i>
						<div class="name">fa-cab</div>
					</li>
					<li><i class="fa fa-car"></i>
						<div class="name">fa-car</div>
					</li>
					<li><i class="fa fa-fighter-jet"></i>
						<div class="name">fa-fighter-jet</div>
					</li>
					<li><i class="fa  fa-plane"></i>
						<div class="name">fa-plane</div>
					</li>
					<li><i class="fa fa-rocket"></i>
						<div class="name">fa-rocket</div>
					</li>
					<li><i class="fa  fa-space-shuttle"></i>
						<div class="name">fa-space-shuttle</div>
					</li>
					<li><i class="fa fa-taxi"></i>
						<div class="name">fa-taxi</div>
					</li>
					<li><i class="fa  fa-truck"></i>
						<div class="name">fa-truck</div>
					</li>

				</ul>

				<ul class="icon_lists clear">
					<div id="divYpLi" class="divFont">音/视频图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa fa-arrows-alt"></i>
						<div class="name">fa-arrows-alt</div>
					</li>
					<li><i class="fa fa-backward"></i>
						<div class="name">fa-backward</div>
					</li>
					<li><i class="fa fa-compress"></i>
						<div class="name">fa-compress</div>
					</li>
					<li><i class="fa  fa-eject"></i>
						<div class="name">fa-eject</div>
					</li>
					<li><i class="fa fa-expand"></i>
						<div class="name">fa-expand</div>
					</li>
					<li><i class="fa fa-fast-backward"></i>
						<div class="name">fa-fast-backward</div>
					</li>
					<li><i class="fa fa-fast-forward"></i>
						<div class="name">fa-fast-forward</div>
					</li>
					<li><i class="fa  fa-forward"></i>
						<div class="name">fa-forward</div>
					</li>
					<li><i class="fa  fa-pause"></i>
						<div class="name">fa-pause</div>
					</li>
					<li><i class="fa  fa-play"></i>
						<div class="name">fa-play</div>
					</li>
					<li><i class="fa fa-play-circle"></i>
						<div class="name">fa-play-circle</div>
					</li>
					<li><i class="fa fa-play-circle-o"></i>
						<div class="name">fa-play-circle-o</div>
					</li>
					<li><i class="fa fa-step-backward"></i>
						<div class="name">fa-step-backward</div>
					</li>
					<li><i class="fa  fa-step-forward"></i>
						<div class="name">fa-step-forward</div>
					</li>
					<li><i class="fa  fa-stop"></i>
						<div class="name">fa-stop</div>
					</li>
					<li><i class="fa  fa-youtube-play"></i>
						<div class="name">fa-youtube-play</div>
					</li>
					<li><i class="fa  fa-microphone"></i>
						<div class="name">fa-microphone</div>
					</li>
					<li><i class="fa  fa-microphone-slash"></i>
						<div class="name">fa-microphone-slash</div>
					</li>
					<li><i class="fa  fa-video-camera"></i>
						<div class="name">fa-video-camera</div>
					</li>
					<li><i class="fa  fa-music"></i>
						<div class="name">fa-music</div>
					</li>
					<li><i class="fa  fa-volume-down"></i>
						<div class="name">fa-volume-down</div>
					</li>
					<li><i class="fa  fa-volume-off"></i>
						<div class="name">fa-volume-off</div>
					</li>
					<li><i class="fa  fa-volume-up"></i>
						<div class="name">fa-volume-up</div>
					</li>
				</ul>

				<ul class="icon_lists clear">
					<div id="divFxLi" class="divFont">方向图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa  fa-angle-down"></i>
						<div class="name">fa-angle-down</div>
					</li>
					<li><i class="fa  fa-angle-left"></i>
						<div class="name">fa-angle-left</div>
					</li>
					<li><i class="fa fa-angle-right"></i>
						<div class="name">fa-angle-right</div>
					</li>
					<li><i class="fa  fa-angle-up"></i>
						<div class="name">fa-angle-up</div>
					</li>

					<li><i class="fa fa-angle-double-down"></i>
						<div class="name">fa-angle-double-down</div>
					</li>
					<li><i class="fa fa-angle-double-left"></i>
						<div class="name">fa-angle-double-left</div>
					</li>
					<li><i class="fa fa-angle-double-right"></i>
						<div class="name">fa-angle-double-right</div>
					</li>
					<li><i class="fa fa-angle-double-up"></i>
						<div class="name">fa-angle-double-right</div>
					</li>

					<li><i class="fa fa-arrow-circle-down"></i>
						<div class="name">fa-arrow-circle-down</div>
					</li>
					<li><i class="fa fa-arrow-circle-left"></i>
						<div class="name">fa-arrow-circle-left</div>
					</li>
					<li><i class="fa fa-arrow-circle-right"></i>
						<div class="name">fa-arrow-circle-right</div>
					</li>
					<li><i class="fa fa-arrow-circle-up"></i>
						<div class="name">fa-arrow-circle-up</div>
					</li>

					<li><i class="fa fa-arrow-circle-o-down"></i>
						<div class="name">fa-arrow-circle-o-down</div>
					</li>
					<li><i class="fa fa-arrow-circle-o-left"></i>
						<div class="name">fa-arrow-circle-o-left</div>
					</li>
					<li><i class="fa fa-arrow-circle-o-right"></i>
						<div class="name">fa-arrow-circle-o-right</div>
					</li>
					<li><i class="fa fa-arrow-circle-o-up"></i>
						<div class="name">fa-arrow-circle-o-up</div>
					</li>

					<li><i class="fa fa-arrow-down"></i>
						<div class="name">fa-arrow-down</div>
					</li>
					<li><i class="fa fa-arrow-left"></i>
						<div class="name">fa-arrow-left</div>
					</li>
					<li><i class="fa fa-arrow-right"></i>
						<div class="name">fa-arrow-right</div>
					</li>
					<li><i class="fa fa-arrow-up"></i>
						<div class="name">fa-arrow-up</div>
					</li>

					<li><i class="fa fa-arrows"></i>
						<div class="name">fa-arrows</div>
					</li>
					<li><i class="fa fa-arrows-alt"></i>
						<div class="name">fa-arrows-alt</div>
					</li>
					<li><i class="fa fa-arrows-h"></i>
						<div class="name">fa-arrows-h</div>
					</li>
					<li><i class="fa fa-arrows-v"></i>
						<div class="name">fa-arrows-v</div>
					</li>

					<li><i class="fa fa-caret-down"></i>
						<div class="name">fa-caret-down</div>
					</li>
					<li><i class="fa fa-caret-left"></i>
						<div class="name">fa-caret-left</div>
					</li>
					<li><i class="fa fa-caret-right"></i>
						<div class="name">fa-caret-right</div>
					</li>
					<li><i class="fa fa-caret-up"></i>
						<div class="name">fa-caret-up</div>
					</li>

					<li><i class="fa fa-caret-square-o-down"></i>
						<div class="name">fa-caret-square-o-down</div>
					</li>
					<li><i class="fa fa-caret-square-o-left"></i>
						<div class="name">fa-caret-square-o-left</div>
					</li>
					<li><i class="fa fa-caret-square-o-right"></i>
						<div class="name">fa-caret-square-o-right</div>
					</li>
					<li><i class="fa fa-caret-square-o-up"></i>
						<div class="name">fa-caret-square-o-up</div>
					</li>

					<li><i class="fa fa-chevron-circle-down"></i>
						<div class="name">fa-chevron-circle-down</div>
					</li>
					<li><i class="fa fa-chevron-circle-left"></i>
						<div class="name">fa-chevron-circle-left</div>
					</li>
					<li><i class="fa fa-chevron-circle-right"></i>
						<div class="name">fa-chevron-circle-right</div>
					</li>
					<li><i class="fa fa-chevron-circle-up"></i>
						<div class="name">fa-chevron-circle-up</div>
					</li>

					<li><i class="fa fa-chevron-down"></i>
						<div class="name">fa-chevron-down</div>
					</li>
					<li><i class="fa fa-chevron-left"></i>
						<div class="name">fa-chevron-left</div>
					</li>
					<li><i class="fa fa-chevron-right"></i>
						<div class="name">fa-chevron-right</div>
					</li>
					<li><i class="fa fa-chevron-up"></i>
						<div class="name">fa-chevron-up</div>
					</li>

					<li><i class="fa fa-long-arrow-down"></i>
						<div class="name">fa-long-arrow-down</div>
					</li>
					<li><i class="fa fa-long-arrow-left"></i>
						<div class="name">fa-long-arrow-left</div>
					</li>
					<li><i class="fa fa-long-arrow-right"></i>
						<div class="name">fa-long-arrow-right</div>
					</li>
					<li><i class="fa fa-long-arrow-up"></i>
						<div class="name">fa-long-arrow-up</div>
					</li>

					<li><i class="fa fa-toggle-down"></i>
						<div class="name">fa-toggle-down</div>
					</li>
					<li><i class="fa fa-toggle-left"></i>
						<div class="name">fa-toggle-left</div>
					</li>
					<li><i class="fa fa-toggle-right"></i>
						<div class="name">fa-toggle-right</div>
					</li>
					<li><i class="fa fa-toggle-up"></i>
						<div class="name">fa-toggle-up</div>
					</li>
				</ul>
				<ul class="icon_lists clear">
					<div id="divSjLi" class="divFont">社交/商业图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>
					
					<li><i class="fa fa-star"></i>
						<div class="name">fa-star</div>
					</li>
					<li><i class="fa fa-star-half"></i>
						<div class="name">fa-star-half</div>
					</li>
					<li><i class="fa fa-star-half-empty"></i>
						<div class="name">fa-star-half-empty</div>
					</li>
					<li><i class="fa fa-star-half-full"></i>
						<div class="name">fa-star-half-full</div>
					</li>
					<li><i class="fa fa-star-half-o"></i>
						<div class="name">fa-star-half-o</div>
					</li>
					<li><i class="fa fa-star-o"></i>
						<div class="name">fa-star-o</div>
					</li>
					<li><i class="fa fa-comment"></i>
						<div class="name">fa-comment</div>
					</li>
					<li><i class="fa fa-comment-o"></i>
						<div class="name">fa-comment-o</div>
					</li>
					<li><i class="fa fa-comments-o"></i>
						<div class="name">fa-comments-o</div>
					</li>
					<li><i class="fa fa-comments"></i>
						<div class="name">fa-comments</div>
					</li>
					
					<li><i class="fa fa-wechat"></i>
						<div class="name">fa-wechat</div>
					</li>
					<li><i class="fa fa-weibo"></i>
						<div class="name">fa-weibo</div>
					</li>
					<li><i class="fa fa-weixin"></i>
						<div class="name">fa-weixin</div>
					</li>
					<li><i class="fa fa-qq"></i>
						<div class="name">fa-qq</div>
					</li>
					<li><i class="fa fa-mobile"></i>
						<div class="name">fa-mobile</div>
					</li>
					<li><i class="fa fa-mobile-phone"></i>
						<div class="name">fa-mobile-phone</div>
					</li>
					<li><i class="fa fa-phone"></i>
						<div class="name">fa-phone</div>
					</li>
					<li><i class="fa fa-phone-square"></i>
						<div class="name">fa-phone-square</div>
					</li>
					<li><i class="fa fa-laptop"></i>
						<div class="name">fa-laptop</div>
					</li>
					<li><i class="fa fa-fax"></i>
						<div class="name">fa-fax</div>
					</li>
					<li><i class="fa fa-skype"></i>
						<div class="name">fa-skype</div>
					</li>
					<li><i class="fa fa-envelope"></i>
						<div class="name">fa-envelope</div>
					</li>
					<li><i class="fa fa-envelope-o"></i>
						<div class="name">fa-envelope-o</div>
					</li>
					<li><i class="fa fa-apple"></i>
						<div class="name">fa-apple</div>
					</li>
					<li><i class="fa fa-android"></i>
						<div class="name">fa-android</div>
					</li>
					
					<li><i class="fa fa-bitbucket"></i>
						<div class="name">fa-bitbucket</div>
					</li>
					<li><i class="fa fa-bitbucket-square"></i>
						<div class="name">fa-bitbucket-square</div>
					</li>
					<li><i class="fa fa-camera"></i>
						<div class="name">fa-camera</div>
					</li>
					<li><i class="fa fa-camera-retro"></i>
						<div class="name">fa-camera-retro</div>
					</li>
					<li><i class="fa fa-coffee"></i>
						<div class="name">fa-coffee</div>
					</li>
					<li><i class="fa fa-cutlery"></i>
						<div class="name">fa-cutlery</div>
					</li>
					
					<li><i class="fa fa-facebook"></i>
						<div class="name">fa-facebook</div>
					</li>
					<li><i class="fa fa-facebook-square"></i>
						<div class="name">fa-facebook-square</div>
					</li>
					<li><i class="fa fa-frown-o"></i>
						<div class="name">fa-frown-o</div>
					</li>
					<li><i class="fa fa-gamepad"></i>
						<div class="name">fa-gamepad</div>
					</li>
					<li><i class="fa fa-gavel"></i>
						<div class="name">fa-gavel</div>
					</li>
					<li><i class="fa fa-gift"></i>
						<div class="name">fa-gift</div>
					</li>
					<li><i class="fa fa-spoon"></i>
						<div class="name">fa-spoon</div>
					</li>
					<li><i class="fa fa-wordpress"></i>
						<div class="name">fa-wordpress</div>
					</li>
					<li><i class="fa fa-youtube"></i>
						<div class="name">fa-youtube</div>
					</li>
					<li><i class="fa fa-twitter"></i>
						<div class="name">fa-twitter</div>
					</li>
					<li><i class="fa fa-twitter-square"></i>
						<div class="name">fa-twitter-square</div>
					</li>
					<li><i class="fa fa-google"></i>
						<div class="name">fa-google</div>
					</li>
					<li><i class="fa fa-google-plus"></i>
						<div class="name">fa-google-plus</div>
					</li>
					<li><i class="fa fa-renren"></i>
						<div class="name">fa-renren</div>
					</li>
					<li><i class="fa fa-linkedin"></i>
						<div class="name">fa-linkedin</div>
					</li>
					<li><i class="fa fa-linkedin-square"></i>
						<div class="name">fa-linkedin-square</div>
					</li>
					<li><i class="fa fa-yahoo"></i>
						<div class="name">fa-yahoo</div>
					</li>
					<li><i class="fa fa-git"></i>
						<div class="name">fa-git</div>
					</li>
					<li><i class="fa fa-github"></i>
						<div class="name">fa-github</div>
					</li>
					<li><i class="fa fa-html5"></i>
						<div class="name">fa-html5</div>
					</li>
					<li><i class="fa fa-windows"></i>
						<div class="name">fa-windows</div>
					</li>
					<li><i class="fa fa-linux"></i>
						<div class="name">fa-linux</div>
					</li>
					<li><i class="fa fa-university"></i>
						<div class="name">fa-university</div>
					</li>
					<li><i class="fa fa-money"></i>
						<div class="name">fa-money</div>
					</li>
					<li><i class="fa fa-jpy"></i>
						<div class="name">fa-jpy</div>
					</li>
					<li><i class="fa fa-rmb"></i>
						<div class="name">fa-rmb</div>
					</li>
					<li><i class="fa fa-usd"></i>
						<div class="name">fa-usd</div>
					</li>
					<li><i class="fa fa-shopping-cart"></i>
						<div class="name">fa-shopping-cart</div>
					</li>
					<li><i class="fa fa-smile-o"></i>
						<div class="name">fa-smile-o</div>
					</li>
					<li><i class="fa fa-home"></i>
						<div class="name">fa-home</div>
					</li>
				</ul>	
				<ul class="icon_lists clear">
					<div id="divQtLi" class="divFont">其他图标</div>
					<div style="margin-bottom: 15px; padding: 0; width: 100%; height: 2px; background-color: #8aabe5; overflow: hidden;"></div>

					<li><i class="fa fa-credit-card"></i>
						<div class="name">fa-credit-card</div>
					</li>
					<li><i class="fa fa-sort-asc"></i>
						<div class="name">fa-sort-asc</div>
					</li>
					<li><i class="fa fa-sort-desc"></i>
						<div class="name">fa-sort-desc</div>
					</li>
					<li><i class="fa fa-sort-down"></i>
						<div class="name">fa-sort-down</div>
					</li>
					<li><i class="fa fa-sort"></i>
						<div class="name">fa-sort</div>
					</li>
					<li><i class="fa fa-sort-up"></i>
						<div class="name">fa-sort-up</div>
					</li>
										<li><i class="fa fa-adjust"></i>
						<div class="name">fa-adjust</div>
					</li>
					<li><i class="fa fa-adn"></i>
						<div class="name">fa-adn</div>
					</li>
					<li><i class="fa fa-anchor"></i>
						<div class="name">fa-anchor</div>
					</li>
					<li><i class="fa fa-archive"></i>
						<div class="name">fa-archive</div>
					</li>
					<li><i class="fa fa-asterisk"></i>
						<div class="name">fa-asterisk</div>
					</li>
					<li><i class="fa fa-bank"></i>
						<div class="name">fa-bank</div>
					</li>
					<li><i class="fa fa-barcode"></i>
						<div class="name">fa-barcode</div>
					</li>
					<li><i class="fa fa-bars"></i>
						<div class="name">fa-bars</div>
					</li>
					<li><i class="fa fa-beer"></i>
						<div class="name">fa-beer</div>
					</li>
					<li><i class="fa fa-behance-square"></i>
						<div class="name">fa-behance-square</div>
					</li>
					<li><i class="fa fa-behance"></i>
						<div class="name">fa-behance</div>
					</li>
					<li><i class="fa fa-bell-o"></i>
						<div class="name">fa-bell-o</div>
					</li>
					<li><i class="fa fa-bell"></i>
						<div class="name">fa-bell</div>
					</li>
					<li><i class="fa fa-bitcoin"></i>
						<div class="name">fa-bitcoin</div>
					</li>
					<li><i class="fa fa-bolt"></i>
						<div class="name">fa-bolt</div>
					</li>
					<li><i class="fa fa-bomb"></i>
						<div class="name">fa-bomb</div>
					</li>
					<li><i class="fa fa-book"></i>
						<div class="name">fa-book</div>
					</li>
					<li><i class="fa fa-briefcase"></i>
						<div class="name">fa-briefcase</div>
					</li>
					<li><i class="fa fa-btc"></i>
						<div class="name">fa-btc</div>
					</li>
					<li><i class="fa fa-bug"></i>
						<div class="name">fa-bug</div>
					</li>
					<li><i class="fa fa-building-o"></i>
						<div class="name">fa-building-o</div>
					</li>
					<li><i class="fa fa-building"></i>
						<div class="name">fa-building</div>
					</li>
					<li><i class="fa fa-bullhorn"></i>
						<div class="name">fa-bullhorn</div>
					</li>
					<li><i class="fa fa-bullseye"></i>
						<div class="name">fa-bullseye</div>
					</li>
					<li><i class="fa fa-calendar-o"></i>
						<div class="name">fa-calendar-o</div>
					</li>
					<li><i class="fa fa-calendar"></i>
						<div class="name">fa-calendar</div>
					</li>
					<li><i class="fa fa-certificate"></i>
						<div class="name">fa-certificate</div>
					</li>
					<li><i class="fa fa-chain-broken"></i>
						<div class="name">fa-chain-broken</div>
					</li>
					<li><i class="fa fa-chain"></i>
						<div class="name">fa-chain</div>
					</li>
					<li><i class="fa fa-circle-o-notch"></i>
						<div class="name">fa-circle-o-notch</div>
					</li>
					<li><i class="fa fa-circle-o"></i>
						<div class="name">fa-circle-o</div>
					</li>
					<li><i class="fa fa-circle-thin"></i>
						<div class="name">fa-circle-thin</div>
					</li>
					<li><i class="fa fa-circle"></i>
						<div class="name">fa-circle</div>
					</li>
					<li><i class="fa fa-clock-o"></i>
						<div class="name">fa-clock-o</div>
					</li>
					<li><i class="fa fa-cloud-download"></i>
						<div class="name">fa-cloud-download</div>
					</li>
					<li><i class="fa fa-cloud-upload"></i>
						<div class="name">fa-cloud-upload</div>
					</li>
					<li><i class="fa fa-cloud"></i>
						<div class="name">fa-cloud</div>
					</li>
					<li><i class="fa fa-cny"></i>
						<div class="name">fa-cny</div>
					</li>
					<li><i class="fa fa-codepen"></i>
						<div class="name">fa-codepen</div>
					</li>
					<li><i class="fa fa-cog"></i>
						<div class="name">fa-cog</div>
					</li>
					<li><i class="fa fa-cogs"></i>
						<div class="name">fa-cogs</div>
					</li>
					<li><i class="fa fa-compass"></i>
						<div class="name">fa-compass</div>
					</li>
					<li><i class="fa fa-compress"></i>
						<div class="name">fa-compress</div>
					</li>
					<li><i class="fa fa-crosshairs"></i>
						<div class="name">fa-crosshairs</div>
					</li>
					<li><i class="fa fa-css3"></i>
						<div class="name">fa-css3</div>
					</li>
					<li><i class="fa fa-cube"></i>
						<div class="name">fa-cube</div>
					</li>
					<li><i class="fa fa-cubes"></i>
						<div class="name">fa-cubes</div>
					</li>
					<li><i class="fa fa-dashboard"></i>
						<div class="name">fa-dashboard</div>
					</li>
					<li><i class="fa fa-delicious"></i>
						<div class="name">fa-delicious</div>
					</li>
					<li><i class="fa fa-deviantart"></i>
						<div class="name">fa-deviantart</div>
					</li>
					<li><i class="fa fa-digg"></i>
						<div class="name">fa-digg</div>
					</li>
					<li><i class="fa fa-dollar"></i>
						<div class="name">fa-dollar</div>
					</li>
					<li><i class="fa fa-dot-circle-o"></i>
						<div class="name">fa-dot-circle-o</div>
					</li>
					<li><i class="fa fa-dribbble"></i>
						<div class="name">fa-dribbble</div>
					</li>
					<li><i class="fa fa-dropbox"></i>
						<div class="name">fa-dropbox</div>
					</li>
					<li><i class="fa fa-drupal"></i>
						<div class="name">fa-drupal</div>
					</li>
					<li><i class="fa fa-eject"></i>
						<div class="name">fa-eject</div>
					</li>
					<li><i class="fa fa-ellipsis-h"></i>
						<div class="name">fa-ellipsis-h</div>
					</li>
					<li><i class="fa fa-ellipsis-v"></i>
						<div class="name">fa-ellipsis-v</div>
					</li>
					<li><i class="fa fa-empire"></i>
						<div class="name">fa-empire</div>
					</li>
					<li><i class="fa fa-envelope-square"></i>
						<div class="name">fa-envelope-square</div>
					</li>
					<li><i class="fa fa-eraser"></i>
						<div class="name">fa-eraser</div>
					</li>
					<li><i class="fa fa-eur"></i>
						<div class="name">fa-eur</div>
					</li>
					<li><i class="fa fa-euro"></i>
						<div class="name">fa-euro</div>
					</li>
					<li><i class="fa fa-exclamation-circle"></i>
						<div class="name">fa-exclamation-circle</div>
					</li>
					<li><i class="fa fa-exclamation-triangle"></i>
						<div class="name">fa-exclamation-triangle</div>
					</li>
					<li><i class="fa fa-exclamation"></i>
						<div class="name">fa-exclamation</div>
					</li>
					<li><i class="fa fa-external-link-square"></i>
						<div class="name">fa-external-link-square</div>
					</li>
					<li><i class="fa fa-external-link"></i>
						<div class="name">fa-external-link</div>
					</li>
					<li><i class="fa fa-eye-slash"></i>
						<div class="name">fa-eye-slash</div>
					</li>
					<li><i class="fa fa-fire-extinguisher"></i>
						<div class="name">fa-fire-extinguisher</div>
					</li>
					<li><i class="fa fa-fire"></i>
						<div class="name">fa-fire</div>
					</li>
					<li><i class="fa fa-flag-checkered"></i>
						<div class="name">fa-flag-checkered</div>
					</li>
					<li><i class="fa fa-flag-o"></i>
						<div class="name">fa-flag-o</div>
					</li>
					<li><i class="fa fa-flag"></i>
						<div class="name">fa-flag</div>
					</li>
					<li><i class="fa fa-flash"></i>
						<div class="name">fa-flash</div>
					</li>
					<li><i class="fa fa-flask"></i>
						<div class="name">fa-flask</div>
					</li>
					<li><i class="fa fa-flickr"></i>
						<div class="name">fa-flickr</div>
					</li>
					<li><i class="fa fa-foursquare"></i>
						<div class="name">fa-foursquare</div>
					</li>
					<li><i class="fa fa-gbp"></i>
						<div class="name">fa-gbp</div>
					</li>
					<li><i class="fa fa-ge"></i>
						<div class="name">fa-ge</div>
					</li>
					<li><i class="fa fa-gear"></i>
						<div class="name">fa-gear</div>
					</li>
					<li><i class="fa fa-gears"></i>
						<div class="name">fa-gears</div>
					</li>
					<li><i class="fa fa-git-square"></i>
						<div class="name">fa-git-square</div>
					</li>
					<li><i class="fa fa-gittip"></i>
						<div class="name">fa-gittip</div>
					</li>
					<li><i class="fa fa-glass"></i>
						<div class="name">fa-glass</div>
					</li>
					<li><i class="fa fa-globe"></i>
						<div class="name">fa-globe</div>
					</li>
					<li><i class="fa fa-google-plus-square"></i>
						<div class="name">fa-google-plus-square</div>
					</li>
					<li><i class="fa fa-graduation-cap"></i>
						<div class="name">fa-graduation-cap</div>
					</li>
					<li><i class="fa fa-h-square"></i>
						<div class="name">fa-h-square</div>
					</li>
					<li><i class="fa fa-hacker-news"></i>
						<div class="name">fa-hacker-news</div>
					</li>
					<li><i class="fa fa-hdd-o"></i>
						<div class="name">fa-hdd-o</div>
					</li>
					<li><i class="fa fa-headphones"></i>
						<div class="name">fa-headphones</div>
					</li>
					<li><i class="fa fa-history"></i>
						<div class="name">fa-history</div>
					</li>
					<li><i class="fa fa-hospital-o"></i>
						<div class="name">fa-hospital-o</div>
					</li>
					<li><i class="fa fa-inbox"></i>
						<div class="name">fa-inbox</div>
					</li>
					<li><i class="fa fa-inr"></i>
						<div class="name">fa-inr</div>
					</li>
					<li><i class="fa fa-instagram"></i>
						<div class="name">fa-instagram</div>
					</li>
					<li><i class="fa fa-joomla"></i>
						<div class="name">fa-joomla</div>
					</li>
					<li><i class="fa fa-jsfiddle"></i>
						<div class="name">fa-jsfiddle</div>
					</li>
					<li><i class="fa fa-key"></i>
						<div class="name">fa-key</div>
					</li>
					<li><i class="fa fa-keyboard-o"></i>
						<div class="name">fa-keyboard-o</div>
					</li>
					<li><i class="fa fa-krw"></i>
						<div class="name">fa-krw</div>
					</li>
					<li><i class="fa fa-language"></i>
						<div class="name">fa-language</div>
					</li>
					<li><i class="fa fa-leaf"></i>
						<div class="name">fa-leaf</div>
					</li>
					<li><i class="fa fa-legal"></i>
						<div class="name">fa-legal</div>
					</li>
					<li><i class="fa fa-lemon-o"></i>
						<div class="name">fa-lemon-o</div>
					</li>
					<li><i class="fa fa-level-down"></i>
						<div class="name">fa-level-down</div>
					</li>
					<li><i class="fa fa-level-up"></i>
						<div class="name">fa-level-up</div>
					</li>
					<li><i class="fa fa-life-bouy"></i>
						<div class="name">fa-life-bouy</div>
					</li>
					<li><i class="fa fa-life-ring"></i>
						<div class="name">fa-life-ring</div>
					</li>
					<li><i class="fa fa-life-saver"></i>
						<div class="name">fa-life-saver</div>
					</li>
					<li><i class="fa fa-lightbulb-o"></i>
						<div class="name">fa-lightbulb-o</div>
					</li>
					<li><i class="fa fa-location-arrow"></i>
						<div class="name">fa-location-arrow</div>
					</li>
					<li><i class="fa fa-magic"></i>
						<div class="name">fa-magic</div>
					</li>
					<li><i class="fa fa-magnet"></i>
						<div class="name">fa-magnet</div>
					</li>
					<li><i class="fa fa-map-marker"></i>
						<div class="name">fa-map-marker</div>
					</li>
					<li><i class="fa fa-maxcdn"></i>
						<div class="name">fa-maxcdn</div>
					</li>
					<li><i class="fa fa-moon-o"></i>
						<div class="name">fa-moon-o</div>
					</li>
					<li><i class="fa fa-mortar-board"></i>
						<div class="name">fa-mortar-board</div>
					</li>
					<li><i class="fa fa-openid"></i>
						<div class="name">fa-openid</div>
					</li>
					<li><i class="fa fa-pagelines"></i>
						<div class="name">fa-pagelines</div>
					</li>
					<li><i class="fa fa-paper-plane-o"></i>
						<div class="name">fa-paper-plane-o</div>
					</li>
					<li><i class="fa fa-paper-plane"></i>
						<div class="name">fa-paper-plane</div>
					</li>
					<li><i class="fa fa-paperclip"></i>
						<div class="name">fa-paperclip</div>
					</li>
					<li><i class="fa fa-paragraph"></i>
						<div class="name">fa-paragraph</div>
					</li>
					<li><i class="fa fa-paw"></i>
						<div class="name">fa-paw</div>
					</li>
					<li><i class="fa fa-pied-piper-alt"></i>
						<div class="name">fa-pied-piper-alt</div>
					</li>
					<li><i class="fa fa-pied-piper-square"></i>
						<div class="name">fa-pied-piper-square</div>
					</li>
					<li><i class="fa fa-pied-piper"></i>
						<div class="name">fa-pied-piper</div>
					</li>
					<li><i class="fa fa-pinterest-square"></i>
						<div class="name">fa-pinterest-square</div>
					</li>
					<li><i class="fa fa-pinterest"></i>
						<div class="name">fa-pinterest</div>
					</li>
					<li><i class="fa fa-power-off"></i>
						<div class="name">fa-power-off</div>
					</li>
					<li><i class="fa fa-print"></i>
						<div class="name">fa-print</div>
					</li>
					<li><i class="fa fa-puzzle-piece"></i>
						<div class="name">fa-puzzle-piece</div>
					</li>
					<li><i class="fa fa-qrcode"></i>
						<div class="name">fa-qrcode</div>
					</li>
					<li><i class="fa fa-ra"></i>
						<div class="name">fa-ra</div>
					</li>
					<li><i class="fa fa-random"></i>
						<div class="name">fa-random</div>
					</li>
					<li><i class="fa fa-rebel"></i>
						<div class="name">fa-rebel</div>
					</li>
					<li><i class="fa fa-recycle"></i>
						<div class="name">fa-recycle</div>
					</li>
					<li><i class="fa fa-reddit-square"></i>
						<div class="name">fa-reddit-square</div>
					</li>
					<li><i class="fa fa-reddit"></i>
						<div class="name">fa-reddit</div>
					</li>
					<li><i class="fa fa-road"></i>
						<div class="name">fa-road</div>
					</li>
					<li><i class="fa fa-rouble"></i>
						<div class="name">fa-rouble</div>
					</li>
					<li><i class="fa fa-rss-square"></i>
						<div class="name">fa-rss-square</div>
					</li>
					<li><i class="fa fa-rss"></i>
						<div class="name">fa-rss</div>
					</li>
					<li><i class="fa fa-rub"></i>
						<div class="name">fa-rub</div>
					</li>
					<li><i class="fa fa-ruble"></i>
						<div class="name">fa-ruble</div>
					</li>
					<li><i class="fa fa-rupee"></i>
						<div class="name">fa-rupee</div>
					</li>
					<li><i class="fa fa-scissors"></i>
						<div class="name">fa-scissors</div>
					</li>
					<li><i class="fa fa-send-o"></i>
						<div class="name">fa-send-o</div>
					</li>
					<li><i class="fa fa-send"></i>
						<div class="name">fa-send</div>
					</li>
					<li><i class="fa fa-share-alt-square"></i>
						<div class="name">fa-share-alt-square</div>
					</li>
					<li><i class="fa fa-share-alt"></i>
						<div class="name">fa-share-alt</div>
					</li>
					<li><i class="fa fa-share-square-o"></i>
						<div class="name">fa-share-square-o</div>
					</li>
					<li><i class="fa fa-share-square"></i>
						<div class="name">fa-share-square</div>
					</li>
					<li><i class="fa fa-share"></i>
						<div class="name">fa-share</div>
					</li>
					<li><i class="fa fa-shield"></i>
						<div class="name">fa-shield</div>
					</li>
					<li><i class="fa fa-signal"></i>
						<div class="name">fa-signal</div>
					</li>
					<li><i class="fa fa-slack"></i>
						<div class="name">fa-slack</div>
					</li>
					<li><i class="fa fa-sliders"></i>
						<div class="name">fa-sliders</div>
					</li>
					<li><i class="fa fa-soundcloud"></i>
						<div class="name">fa-soundcloud</div>
					</li>
					<li><i class="fa fa-spinner"></i>
						<div class="name">fa-spinner</div>
					</li>
					<li><i class="fa fa-spotify"></i>
						<div class="name">fa-spotify</div>
					</li>
					<li><i class="fa fa-square-o"></i>
						<div class="name">fa-square-o</div>
					</li>
					<li><i class="fa fa-square"></i>
						<div class="name">fa-square</div>
					</li>
					<li><i class="fa fa-stack-exchange"></i>
						<div class="name">fa-stack-exchange</div>
					</li>
					<li><i class="fa fa-stack-overflow"></i>
						<div class="name">fa-stack-overflow</div>
					</li>
					<li><i class="fa fa-steam-square"></i>
						<div class="name">fa-steam-square</div>
					</li>
					<li><i class="fa fa-steam"></i>
						<div class="name">fa-steam</div>
					</li>
					<li><i class="fa fa-stethoscope"></i>
						<div class="name">fa-stethoscope</div>
					</li>
					<li><i class="fa fa-strikethrough"></i>
						<div class="name">fa-strikethrough</div>
					</li>
					<li><i class="fa fa-stumbleupon-circle"></i>
						<div class="name">fa-stumbleupon-circle</div>
					</li>
					<li><i class="fa fa-stumbleupon"></i>
						<div class="name">fa-stumbleupon</div>
					</li>
					<li><i class="fa fa-subscript"></i>
						<div class="name">fa-subscript</div>
					</li>
					<li><i class="fa fa-suitcase"></i>
						<div class="name">fa-suitcase</div>
					</li>
					<li><i class="fa fa-sun-o"></i>
						<div class="name">fa-sun-o</div>
					</li>
					<li><i class="fa fa-superscript"></i>
						<div class="name">fa-superscript</div>
					</li>
					<li><i class="fa fa-support"></i>
						<div class="name">fa-support</div>
					</li>
					<li><i class="fa fa-table"></i>
						<div class="name">fa-table</div>
					</li>
					<li><i class="fa fa-tablet"></i>
						<div class="name">fa-tablet</div>
					</li>
					<li><i class="fa fa-tachometer"></i>
						<div class="name">fa-tachometer</div>
					</li>
					<li><i class="fa fa-tag"></i>
						<div class="name">fa-tag</div>
					</li>
					<li><i class="fa fa-tags"></i>
						<div class="name">fa-tags</div>
					</li>
					<li><i class="fa fa-tasks"></i>
						<div class="name">fa-tasks</div>
					</li>
					<li><i class="fa fa-tencent-weibo"></i>
						<div class="name">fa-tencent-weibo</div>
					</li>
					<li><i class="fa fa-terminal"></i>
						<div class="name">fa-terminal</div>
					</li>
					<li><i class="fa fa-th-large"></i>
						<div class="name">fa-th-large</div>
					</li>
					<li><i class="fa fa-th-list"></i>
						<div class="name">fa-th-list</div>
					</li>
					<li><i class="fa fa-th"></i>
						<div class="name">fa-th</div>
					</li>
					<li><i class="fa fa-thumb-tack"></i>
						<div class="name">fa-thumb-tack</div>
					</li>
					<li><i class="fa fa-ticket"></i>
						<div class="name">fa-ticket</div>
					</li>
					<li><i class="fa fa-tint"></i>
						<div class="name">fa-tint</div>
					</li>
					<li><i class="fa fa-trash-o"></i>
						<div class="name">fa-trash-o</div>
					</li>
					<li><i class="fa fa-tree"></i>
						<div class="name">fa-tree</div>
					</li>
					<li><i class="fa fa-trello"></i>
						<div class="name">fa-trello</div>
					</li>
					<li><i class="fa fa-trophy"></i>
						<div class="name">fa-trophy</div>
					</li>
					<li><i class="fa fa-try"></i>
						<div class="name">fa-try</div>
					</li>
					<li><i class="fa fa-tumblr-square"></i>
						<div class="name">fa-tumblr-square</div>
					</li>
					<li><i class="fa fa-tumblr"></i>
						<div class="name">fa-tumblr</div>
					</li>
					<li><i class="fa fa-turkish-lira"></i>
						<div class="name">fa-turkish-lira</div>
					</li>
					<li><i class="fa fa-umbrella"></i>
						<div class="name">fa-umbrella</div>
					</li>
					<li><i class="fa fa-unlink"></i>
						<div class="name">fa-unlink</div>
					</li>
					<li><i class="fa fa-vimeo-square"></i>
						<div class="name">fa-vimeo-square</div>
					</li>
					<li><i class="fa fa-vine"></i>
						<div class="name">fa-vine</div>
					</li>
					<li><i class="fa fa-vk"></i>
						<div class="name">fa-vk</div>
					</li>
					<li><i class="fa fa-warning"></i>
						<div class="name">fa-warning</div>
					</li>
					<li><i class="fa fa-won"></i>
						<div class="name">fa-won</div>
					</li>
					<li><i class="fa fa-wrench"></i>
						<div class="name">fa-wrench</div>
					</li>
					<li><i class="fa fa-xing-square"></i>
						<div class="name">fa-xing-square</div>
					</li>
					<li><i class="fa fa-xing"></i>
						<div class="name">fa-xing</div>
					</li>
					<li><i class="fa fa-yen"></i>
						<div class="name">fa-yen</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
	</script>

</html>